import * as React from 'react';
import { Tab } from './Tab';
export function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const handleTabClick = index => {
    setActiveIndex(index);
  };

  console.log('children', children);
  // let childreTemp = children.props.children;
  // const filteredChildren = React.Children.toArray(childreTemp).filter(
  //   child => child !== ' '
  // );
  // console.log('filteredChildren', filteredChildren);
  return (
    <div>
      <div className="tabs">
        {children.map((tab, index) => (
          <Tab
            key={index}
            label={tab.props.label}
            isActive={index === activeIndex}
            onClick={() => handleTabClick(index)}
          />
        ))}
      </div>
      <div className="tab-content">
        {children[activeIndex].props.children}
      </div>
      <style jsx>{`
        .tabs {
          display: flex;
          gap: 24px;
          border-bottom: 1px solid var(--border-color);
          margin: 12px 0px;
        }
        .tab-content {
          font-size: 14px;
        }
      `}</style>
    </div>
  );
}
